@import '../../../themes/basic/base-all.less';

:host {
  --ti-spinner-container-height: var(--ti-common-size-7x);
  --ti-spinner-inner-height: calc(var(--ti-spinner-container-height) - var(--ti-common-border-weight-normal) * 2);
}

:host {
  display: inline-block;
  position: relative;
  vertical-align: middle;
  border: var(--ti-common-border-weight-normal) var(--ti-common-border-style-solid) var(--ti-common-color-line-normal);
  border-radius: var(--ti-common-border-radius-normal);
  background-color: var(--ti-common-color-bg-white-normal);
  line-height: normal;
  width: var(--ti-common-size-30x);
  height: var(--ti-spinner-container-height) !important;
  white-space: normal; // 解决在表格中的使用问题
  .box-sizing(border-box);
  .form-border-animat-init();
  &:active {
    border-color: var(--ti-common-color-line-active);
    cursor: pointer;
  }
  &:hover {
    border-color: var(--ti-common-color-line-hover);
    //默认状态下的hover动画
    .form-border-animat-enter();
  }
  &[tiFocused] {
    border-color: var(--ti-common-color-line-active);
  }
  // 错误场景下中间input背景色
  @{tiny-invalid-class} {
    .ti3-spinner-upicon,
    .ti3-spinner-downicon {
      background-color: var(--ti-common-color-error-bg);
    }
  }
}

.ti3-spinner-input-box {
  position: absolute;
  left: var(--ti-spinner-inner-height);
  top: 0;
  width: calc(100% - var(--ti-spinner-inner-height) * 2);
  // 解决浏览器缩放问题：缩放时，输入框底部边框消失
  // 原因：输入框设置固定高度，但其父元素没有高度，随浏览器缩放，输入框固高大于父元素高度，导致底部边框被遮挡
  height: 100%;
  .box-sizing(border-box);

  text-align: center;
  ime-mode: disabled;
  .ti3-spinner-input[tiText] {
    text-align: center;
    height: 100%;
    width: 100%;
    line-height: var(--ti-spinner-inner-height);
    background-color: var(--ti-common-color-transparent); // 设置text透明色，避免覆盖组件样式
  }
}

.ti3-spinner-upicon,
.ti3-spinner-downicon {
  .box-sizing(border-box);
  position: absolute;
  text-align: center;
  top: 0;
  color: var(--ti-common-color-icon-normal);
  width: var(--ti-spinner-inner-height);
  // 解决浏览器缩放问题：缩放时，按钮禁用时底部边框消失
  height: 100%;
  line-height: var(--ti-spinner-inner-height);
  &:not(.ti3-spinner-icon-disabled):hover {
    color: var(--ti-common-color-icon-hover);
    cursor: pointer;
  }
  &.ti3-spinner-icon-disabled {
    color: var(--ti-common-color-icon-disabled);
    background-color: var(--ti-common-color-bg-disabled);
    cursor: not-allowed;
  }
}
.ti3-spinner-upicon {
  border-left: var(--ti-common-border-weight-normal) var(--ti-common-border-style-solid) var(--ti-common-color-line-normal);
  right: 0;
}

.ti3-spinner-downicon {
  border-right: var(--ti-common-border-weight-normal) var(--ti-common-border-style-solid) var(--ti-common-color-line-normal);
  left: 0;
}

:host[disabled] {
  background-color: var(--ti-common-color-bg-disabled);
  border-color: var(--ti-common-color-line-disabled);
  cursor: not-allowed;

  .ti3-spinner-upicon,
  .ti3-spinner-downicon {
    // 禁用样式要优先于悬浮样式，增加样式权重
    &:not(.ti3-spinner-icon-disabled) {
      color: var(--ti-common-color-icon-disabled);
      background-color: var(--ti-common-color-bg-disabled);
      cursor: not-allowed;
    }
    border-color: var(--ti-common-color-line-disabled);
  }
}
